{% extends "article/base.html" %}

{% load staticfiles %}

{% block title %}
    article post
{% endblock %}

{% block content %}
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <link rel="stylesheet" href="{% static 'css/editormd.css' %}">
    <div style="margin-left: 10px;">
    <form action="." class="form-horizontal" method="post">{% csrf_token %}
        <div class="row" style="margin-top:10px">
            <div class="col-md-2 text-right"><span>标题</span></div>
            <div class="col-md-10 text-left">{{ article_post_form.title }}</div>
        </div>
        <div class="row" style="margin-top:10px">
            <div class="col-md-2 text-right"><span>栏目</span></div>
            <div class="col-md-10 text-left">
                <select name="" id="which_column">
                    {% for column in article_columns %}
                        <option value="{{ column.id }}">{{ column.column }}</option>
                    {% endfor %}

                </select>
            </div>
        </div>
        <div class="row" style="margin-top:10px">
            <div class="col-md-2 text-right"><span>内容</span></div>
            <div class="col-md-10 text-left" id="editormd">
                <textarea name="" id="id_body" style="display: none;"></textarea>
            </div>
        </div>

    </form>
     <div class="row">
            <input type="button" class="btn btn-primary btn-lg" value="发布" onclick="publish_article()">
        </div>
    </div>
    </div>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/layer.js' %}"></script>
    <script src="{% static 'editormd.js' %}"></script>
    <script>
    
    $(function () {
       var editor = editormd("editormd", {
           width:"100%",
           height:640,
           syncScrolling:"single",
           path:"{% static 'lib/' %}"
       })
    });
        function publish_article() {
            var title = $("#id_title").val();
            var column_id = $("#which_column").val();
            var body = $("#id_body").val();
            $.ajax({
                url:"{% url 'article:article_post'  %}",
                type:"post",
                data:{"title":title, "column_id":column_id, "body":body},
                success:function (e) {
                    if (e == '1'){
                        layer.msg("添加成功");
                        location.href = "{% url 'article:article_list' %}";
                    }else if(e == '2'){
                        layer.msg("添加失败");
                    }else{
                        layer.msg("项目名称必填");
                    }
                }
            })
            
        }
    </script>
{% endblock %}
